<template>
  <div>
    <br>
    <divider><span class="ion-ios-paper-outline"></span> 订单详情</divider>
    <br>
    <form-preview :header-label="'付款金额'"
                  :body-items="list"
                  :header-value="'￥'+ sum"
                  :footer-buttons="btn"
    ></form-preview>
    <br>
  </div>
</template>

<script>
  import { FormPreview, Divider } from 'vux'
  import service from '../models/services'
  import payType from '../models/payTypeDict'
  import payStatusDict from '../models/payStatusDict'

  export default {
    data () {
      return {
        list: [
        ],
        tradeNo: null,
        btn: [
          {
            style: 'primary',
            text: '返回订单列表',
            link: '/user/orderList'
          },
          {
            style: 'default',
            text: '删除',
            onButtonClick: (name) => {
              const self = this

              this.$vux.confirm.show({
                title: ' 警告',
                content: '您要删除该订单吗？',
                onShow () {
                },
                onHide () {
                },
                onCancel () {
                },
                onConfirm () {
                  const toast = self.$vux.toast
                  service.order.delete(this.tradeNo)
                  .then((res) => {
                    if (res.data.code === 0) {
                      toast.show({
                        text: '删除成功'
                      })
                      self.$router.push({
                        name: 'courseList'
                      })
                    } else {
                      toast.show({
                        type: 'warn',
                        text: '删除失败'
                      })
                    }
                  })
                }
              })
            }
          }
        ],
        order: {},
        sum: 0
      }
    },
    components: {
      FormPreview,
      Divider
    },
    methods: {
      getOrderDetail (tradeNo) {
        return service.order.get(tradeNo)
      }
    },
    mounted () {
      const self = this
      this.tradeNo = this.$route.params.tradeNo
      this.getOrderDetail(this.tradeNo)
      .then((res) => {
        res.data.code = 0
        if (res.data.code === 0) {
          const info = res.data.result
          this.list.push({
            label: '商品名称',
            value: info.subject
          })
          this.list.push({
            label: '订单流水号',
            value: info.tradeNo
          })
          this.list.push({
            label: '支付类型',
            value: payType[info.payType] || 'unknow'
          })
          this.list.push({
            label: '支付状态',
            value: payStatusDict[info.payStatus] || ''
          })
          this.list.push({
            label: '订单详情',
            value: '\r'
          })

          const set = {}
          info.buyCartEntities.forEach((item) => {
            const cid = item.cid
            if (!set[cid]) {
              set[cid] = {
                course: null,
                cha: []
              }
              // todo 优化
              service.course.get(cid, true)
              .then((res) => {
                if (res.data.code === 0) {
                  set[cid].course = res.data.result
                }
              })
            }
            service.chapter.get(item.sid, false)
            .then((res) => {
              if (res.data.code === 0) {
                const cha = res.data.result
                set[cid].cha.push(cha)
                if (cha) {
                  this.list.push({
                    label: cha.title,
                    value: `￥ ${cha.price / 100}`
                  })
                  self.sum += cha.price / 100
                }
              }
            })
          })
        } else {
          this.$vux.alert.show({
            title: '错误提示',
            content: res.data.message,
            onShow () {
            },
            onHide () {
              self.$router.push({
                name: 'courseList'
              })
            }
          })
        }
      })
    }
  }
</script>
